<template>
  <div class="dashboard">
    <h1 class="title">欢迎来到管理系统</h1>

    <!-- 使用 Element Plus 的 el-row 和 el-col 布局 -->
    <el-row gutter="20">
      <!-- 项目信息 -->
      <el-col :span="6">
        <el-card class="info-card" shadow="hover">
          <p class="card-title">全部的项目数量</p>
          <p class="card-value">{{ projects !== null ? projects : '加载中...' }}</p>
        </el-card>
      </el-col>

      <!-- 我的项目 -->
      <el-col :span="6">
        <el-card class="info-card" shadow="hover">
          <p class="card-title">我的项目数量</p>
          <p class="card-value">{{ myProjects !== null ? myProjects : '加载中...' }}</p>
        </el-card>
      </el-col>

      <!-- 我的待办任务 -->
      <el-col :span="6">
        <el-card class="info-card" shadow="hover">
          <p class="card-title">我的待办任务数量</p>
          <p class="card-value">{{ continueTasks !== null ? continueTasks : '加载中...' }}</p>
        </el-card>
      </el-col>

      <!-- 我的完成任务 -->
      <el-col :span="6">
        <el-card class="info-card" shadow="hover">
          <p class="card-title">我的完成任务数量</p>
          <p class="card-value">{{ overTasks !== null ? overTasks : '加载中...' }}</p>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <el-row style="margin: 0px 10px; padding: 0px 15px;">
    <el-col :span="24">
      <el-table :data="sortedTasks" border stripe
                row-key="taskId"
                lazy
                :load="loadChildrenTask"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                @expand-change="expandChange"
                :expand-row-keys="expandRowKeys"
                ref="taskTable"
                @selection-change="handleSelectionChange">
        <!-- 多选框列 -->
        <el-table-column type="selection" width="55"/>
        <!-- 任务编号 -->
        <el-table-column prop="taskId" label="任务编号">
          <template #default="scope">
            <el-link @click="showDetail(scope.row.taskId)" type="success">
              {{ scope.row.taskId }}
            </el-link>
          </template>
        </el-table-column>
        <!-- 任务标题 -->
        <el-table-column prop="taskTitle" label="任务标题"/>
        <!-- 负责人 -->
        <el-table-column prop="user.username" label="负责人"/>
        <!-- 工期 -->
        <el-table-column prop="taskDuration" label="任务工期"/>
        <!-- 开始时间 -->
        <el-table-column prop="startTime" label="开始时间"/>
        <!-- 结束时间 -->
        <el-table-column prop="endTime" label="结束时间"/>
        <!-- 任务状态 -->
        <el-table-column prop="taskStatus" label="任务状态">
          <template #default="scope">
            <el-tag type="info" v-if="scope.row.taskStatus == 1">正常</el-tag>
            <el-tag type="primary" v-else-if="scope.row.taskStatus == 2">暂停</el-tag>
            <el-tag type="danger" v-else-if="scope.row.taskStatus == 99">删除</el-tag>
          </template>
        </el-table-column>

        <!-- 创建时间 -->
        <el-table-column prop="createTime" label="创建时间"/>

        <!-- 操作栏 -->
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-link @click="toEditTask(scope.row)" :disabled="curUserId != project.userId" style="margin: 0px 5px" type="primary">
              <el-icon><EditPen /></el-icon>编辑
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

</template>

<script setup>
import {onBeforeMount, ref} from "vue";

import {ElMessage} from "element-plus";
import taskRequest from "@/api/task.js";
import projectRequest from "@/api/project.js";
// 当前用户编号
let curUserId = ref();
const projects = ref();
//拿到全部的项目数量
function allProjectsCount(){
  projectRequest.allProjects(res=>{
    projects.value = res.code;
  })
}
//拿我的项目数量
const myProjects = ref();
function myProjectsCont(){
  let userId = curUserId;
  projectRequest.myProjects(userId,res=>{
    myProjects.value = res.code;
  })
}
//我的待办任务数量
const continueTasks = ref();
function myContinueTask(){
  let userId = curUserId;
  taskRequest.myContinueTask(userId,res=>{
    continueTasks.value = res.code;
  })
}
//我的完成的任务数量
const overTasks = ref();
function myOverTask(){
  let userId = curUserId;
  taskRequest.myOverTask(userId,res=>{
    overTasks.value = res.code;
  })
}


onBeforeMount(()=>{
  // 获取用户编号
  curUserId = localStorage.getItem("userId");
  console.log(curUserId);
  allProjectsCount();
  myProjectsCont();
  myContinueTask();
  myOverTask();
})

</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.info-card {
  text-align: center;
  background-color: #f5f5f5;
}

.card-title {
  font-size: 18px;
  color: #606266;
}

.card-value {
  font-size: 24px;
  color: #409eff;
  font-weight: bold;
  margin-top: 10px;
}
</style>